<template>
<el-card>
  <el-form label-width="120px">
  <el-row :gutter="24">
    <el-col :span="12">
      <el-form-item label="标题">
        <el-input v-model="baseInfo.title" />
      </el-form-item>
    </el-col>
    <el-col :span="10">
      <el-form-item label="单号">
        <el-input v-model="baseInfo.code" disabled/>
      </el-form-item>
    </el-col>
  </el-row>
  <el-row :gutter="20">
    <el-col :span="8">
      <el-form-item label="收货人">
        <el-input v-model="baseInfo.customerName" />
      </el-form-item>
    </el-col>
    <el-col :span="8">
      <el-form-item label="电话">
        <el-input v-model="baseInfo.phoneNumber" />
      </el-form-item>
    </el-col>
  </el-row>
  <el-row :gutter="20">
    <el-col :span="12">
      <el-form-item label="地址">
        <el-input v-model="baseInfo.address" />
      </el-form-item>
    </el-col>
  </el-row>
   <el-row :gutter="20">
    <el-col :span="8">
      <el-form-item label="制单人">
        <el-input v-model="baseInfo.createdBy" />
      </el-form-item>
    </el-col>
    <el-col :span="8">
      <el-form-item label="制单日期">
        <el-input v-model="baseInfo.createdDate" disabled/>
      </el-form-item>
    </el-col>
  </el-row>
  </el-form>
  <el-divider />
  <el-table :data="tableData" style="width: 100%" height="250">
    <el-table-column fixed label="序号" width="80" >
      <template #default="scope">
        {{scope.$index + 1}}
      </template>
    </el-table-column>
    <el-table-column fixed prop="productName" label="产品名称" width="150" />
    <el-table-column prop="color" label="颜色" width="120" />
    <el-table-column prop="unit" label="单位" width="120" />
    <el-table-column prop="width" label="宽" width="120" />
    <el-table-column prop="length" label="长" width="120" />
    <el-table-column prop="quantity" label="数量" width="120" />
    <el-table-column prop="area" label="面积" width="120" />
    <el-table-column prop="unitPrice" label="单价" width="120" />
    <el-table-column prop="discountRate" label="折扣率" width="120" />
    <el-table-column prop="amount" label="金额" width="120" />
    <el-table-column prop="note" label="备注" width="120" />
    <el-table-column fixed="right" label="操作" width="180">
      <template #default="scope">
        <el-button
          link
          type="primary"
          size="small"
          @click.prevent="copyRow(scope.$index)"
        >
          复制
        </el-button>

        <el-button
          link
          type="primary"
          size="small"
          @click.prevent="editRow(scope.$index)"
        >
          编辑
        </el-button>

        <el-button
          link
          type="primary"
          size="small"
          @click.prevent="deleteRow(scope.$index)"
        >
          删除
        </el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-button class="mt-4" style="width: 100%" @click="onAddItem">添加</el-button>

  <el-divider style="margin-top: 80px"/>
  <el-row>
    <el-col :span="2"><el-button type="primary">返    回</el-button></el-col>
    <el-col :span="2"><el-button type="primary">保    存</el-button></el-col>
    <el-col :span="2"><el-button type="primary">预    览</el-button></el-col>
    <el-col :span="2"><el-button type="primary">打    印</el-button></el-col>
  </el-row>
</el-card>

<el-dialog title="添加一条数据" v-model="open" width="780px" append-to-body>
  <el-form label-width="80px">
    <el-row>
      <el-col :span="12">
        <el-form-item label="产品名称" prop="productName">
          <el-input v-model="item.productName" placeholder="请输入产品名称" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
      <el-form-item label="颜色" prop="color">
        <el-input v-model="item.color" placeholder="请输入颜色" />
      </el-form-item>
    </el-col>
    <el-col :span="12">
      <el-form-item label="单位" prop="unit">
        <el-input v-model="item.unit" placeholder="请输入单位" />
      </el-form-item>
    </el-col>
    <el-col :span="12">
      <el-form-item label="宽度" prop="width">
        <el-input v-model="item.width" placeholder="请输入宽度" />
      </el-form-item>
    </el-col>
    <el-col :span="12">
      <el-form-item label="长度" prop="length">
        <el-input v-model="item.length" placeholder="请输入长度" />
      </el-form-item>
    </el-col>
    <el-col :span="12">
      <el-form-item label="数量" prop="quantity">
        <el-input v-model="item.quantity" placeholder="请输入数量" />
      </el-form-item>
    </el-col>
    <el-col :span="12">
      <el-form-item label="面积" prop="area">
        <el-input v-model="item.area" placeholder="请输入面积" />
      </el-form-item>
    </el-col>
    <el-col :span="12">
      <el-form-item label="单价" prop="unitPrice">
        <el-input v-model="item.unitPrice" placeholder="请输入单价" />
      </el-form-item>
    </el-col>
    <el-col :span="12">
      <el-form-item label="折扣率" prop="discountRate">
        <el-input v-model="item.discountRate" placeholder="请输入折扣率" />
      </el-form-item>
    </el-col>
    <el-col :span="12">
      <el-form-item label="金额" prop="amount">
        <el-input v-model="item.amount" placeholder="请输入金额" />
      </el-form-item>
    </el-col>
    <el-col :span="12">
      <el-form-item label="备注" prop="note">
        <el-input v-model="item.note" placeholder="请输入备注" />
      </el-form-item>
    </el-col>
    </el-row> 
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button type="primary" @click="submit">确 定</el-button>
    <el-button @click="cancel">取 消</el-button>
  </div>
</el-dialog>

</template>

<script setup lang="ts">
import { ref , reactive } from "vue"

// 深拷贝函数
const deepClone = (obj) => {
  return JSON.parse(JSON.stringify(obj));
};

let baseInfo = reactive({
  title: '',
  code: '',
  customerName: '',
  phoneNumber: '',
  address: '',
  createdBy: '',
  createdDate: '',
})

interface Item {
  productName: string;
  color: string;
  unit: string;
  width: number;
  length: number;
  quantity: number;
  area: number;
  unitPrice: number;
  discountRate: number;
  amount: number;
  note: string;
}

const item = reactive<Item>({}); 
const open = ref(false);
const edit = ref(false);
let edx = 0;

function generateOrderNumber() {
  const now = new Date();
  const year = now.getFullYear();
  const month = (now.getMonth() + 1).toString().padStart(2, '0');
  const day = now.getDate().toString().padStart(2, '0');

  const min = 100;
  const max = 999;
  const uniqueNumber = Math.floor(Math.random() * (max - min + 1)) + min;

  const orderNumber = `BJ-${year}${month}${day}${uniqueNumber}`;
  return orderNumber;
}

function generateDate() {
  const now = new Date();
  const year = now.getFullYear();
  const month = (now.getMonth() + 1).toString().padStart(2, '0');
  const day = now.getDate().toString().padStart(2, '0');

  return `${year}-${month}-${day}`;
}

baseInfo.code = generateOrderNumber()
baseInfo.createdDate = generateDate()


const tableData = ref([

])

const editRow = (index: number) => {
  let edm = deepClone(tableData.value[index])
  item.productName=edm.productName;
  item.color=edm.color;
  item.unit=edm.unit;
  item.width=edm.width;
  item.length=edm.length;
  item.quantity=edm.quantity;
  item.area=edm.area;
  item.unitPrice=edm.unitPrice;
  item.discountRate=edm.discountRate;
  item.amount=edm.amount;
  item.note=edm.note;
  edx = index
  open.value = true
}

const deleteRow = (index: number) => {
  edit.value = true;
  tableData.value.splice(index, 1)
}

const copyRow =  (index: number) => {
  tableData.value.push(deepClone(tableData.value[index]))
}

function reset() {
    item.productName=null;
    item.color=null;
    item.unit=null;
    item.width=null;
    item.length=null;
    item.quantity=null;
    item.area=null;
    item.unitPrice=null;
    item.discountRate=null;
    item.amount=null;
    item.note=null;
}
function cancel() {
  open.value = false;
  reset();
}
function submit() {
  if (!edit) {
    tableData.value.push(deepClone(item));
  } else {
    tableData.value[edx]= deepClone(item);
  }
  edit.value = false;
  open.value = false;
}
const onAddItem = () => {
  open.value = true;
  reset();
}
</script>
